<template>
	<view class="container">
		<image class="bg-set" src="../../static/index/images/bg.jpg"></image>
		<view class="content">
			<image class="header" src="../../static/index/images/header3.png"></image>
		</view>
		<view>
			<image class="title animated bounceIn" src="../../static/index/images/title.png"></image>
		</view>

		<LuckyWheel class="lucky animated bounceIn" ref="luckyWheel" width="580rpx" height="580rpx" :blocks="blocks" :prizes="prizes"
		 :buttons="buttons" :defaultStyle="defaultStyle" @start="startCallBack" @end="endCallBack" />

		<view class="modal" :class="{show: modal}" @click="closeModal">
			<view class="modal-body animated bounceIn" :class="{show: modal}" @click.stop>
				<image class="modal-image" src="../../static/index/cj_img/zhuanpan_tanchaung@2x.png"></image>
				<text class="model-text" v-if="keyword == null">{{res_title}}</text>
				<image class="image-1" v-if="keyword == 'jin_chao'" src="../../static/index/images/1.png"></image>
				<image class="image-2" v-if="keyword == 'cha_ju'" src="../../static/index/images/2.png"></image>
				<image class="image-3" v-if="keyword == 'ru_yi'" src="../../static/index/images/3.png"></image>
			</view>
		</view>

	</view>
</template>

<script>
	// 公共
	import common from '@/common/common.js'
	import GL from '@/common/js/Random.js'

	// 请求接口
	import $prize from '@/utils/api/prize.js';

	import LotteryDraw from "@/components/PFUNI-LotteryDraw/LotteryDraw.vue";
	import LuckyWheel from '../../components/uni-luck-draw/lucky-wheel.vue' // 九宫格

	// script
	import AlmostLottery from '@/components/almost-lottery/almost-lottery.vue'

	export default {
		components: {
			LuckyWheel,
			LotteryDraw,
			AlmostLottery
		},
		data() {
			return {
				res_title: '再来一次',
				keyword: null,
				prizeList: [],
				title: 'Hello',
				blocks: [{
					padding: '10px',
					background: '#d64737',
				}, ],
				prizes: [{
						keyword: 'jin_chao',
						title: '金钞一枚',
						background: 'rgb(255,64,0)',
						fonts: [{
							text: '金钞一枚',
							fontColor: '#ffffff',
							top: '60%',
							fontSize: '12'
						}],
						imgs: [{
							src: '../../static/index/images/jin_chao.png',
							top: 20,
							width: '60',
							height: '30'
						}]
					},
					{
						keyword: 'ru_yi',
						title: '定制如意',
						background: 'rgb(255,246,139)',
						fonts: [{
							text: '定制如意',
							top: '60%',
							fontSize: '12'
						}],
						imgs: [{
							src: '../../static/index/images/ru_yi.png',
							top: 20,
							width: '60',
							height: '30'
						}]
					},
					{
						keyword: 'cha_ju',
						title: '精美茶具',
						background: 'rgb(255,212,40)',
						fonts: [{
							text: '精美茶具',
							top: '60%',
							fontSize: '12'
						}],
						imgs: [{
							src: '../../static/index/images/cha_ju.png',
							top: 20,
							width: '20',
							height: '30'
						}]
					},
					{
						keyword: 'ru_yi',
						title: '定制如意',
						background: 'rgb(255,246,139)',
						fonts: [{
							text: '定制如意',
							top: '60%',
							fontSize: '12'
						}],
						imgs: [{
							src: '../../static/index/images/ru_yi.png',
							top: 20,
							width: '60',
							height: '30'
						}]
					},
					{
						keyword: null,
						title: '谢谢参与',
						background: 'rgb(255,64,0)',
						fonts: [{
							text: '谢谢参与',
							fontColor: '#ffffff',
							top: '60%',
							fontSize: '12'
						}],
						imgs: [{
							src: '../../static/index/images/xiao_lian.png',
							top: 10,
							width: '46',
							height: '46'
						}]
					},
					{
						keyword: 'ru_yi',
						title: '定制如意',
						background: 'rgb(255,246,139)',
						fonts: [{
							text: '定制如意',
							top: '60%',
							fontSize: '12'
						}],
						imgs: [{
							src: '../../static/index/images/ru_yi.png',
							top: 20,
							width: '60',
							height: '30'
						}]
					},
					{
						keyword: 'cha_ju',
						title: '精美茶具',
						background: 'rgb(255,212,40)',
						fonts: [{
							text: '精美茶具',
							top: '60%',
							fontSize: '12'
						}],
						imgs: [{
							src: '../../static/index/images/cha_ju.png',
							top: 20,
							width: '20',
							height: '30'
						}]
					}
				],
				buttons: [{
					radius: '35px',
					imgs: [{
						src: '../../static/index/images/zhi_zhen.png',
						top: -52,
						width: '70',
						height: '90'
					}]
				}],
				defaultStyle: {
					fontColor: '#d64737',
					fontSize: '14px'
				},
				showTitle: true,
				modal: false, // 展示modal模块
				modalTxt: '', // 奖品
				ss: 5, // 旋转所用时间
				deg: 0 // 旋转角度
			}
		},
		onLoad() {},
		methods: {
			// 获取首页商品分类列表
			getPrizeList() {
				console.log(11111);
				// var cache_data = common.cache('cat_list', null)
				// if(cache_data){
				// 	this.classList = cache_data
				// }else{
				$prize.get_prize_list({}, 'GET').then(res => {
					// this.classList = this.classList.concat(res.data)
					// common.cache('cat_list', this.classList, 3600)
				});
				// }
				// $goods.get_cat_list({}, 'GET').then(res => {
				// 	this.classList = this.classList.concat(res.data)
				// });
			},

			// 点击抽奖按钮触发回调
			startCallBack() {

				var cache_data = common.cache('token', null)
				if (cache_data) {
					// 先开始旋转
					this.$refs.luckyWheel.play()
					// 使用定时器来模拟请求接口
					setTimeout(() => {
						// 随机数范围 ：40~900
						let random = new GL(0, 7);

						// 调整概率
						random.percentage = new Map([
							// [0, 0.05],
							// [1, 0.05], 
							// [2, 0.05],
							// [3, 0.05],
							[4, 0.7]
							// [5, 0.05],
							// [6, 0.05],
						]);

						// 生成值区间
						random.range();

						let index = random.create()

						console.log(index);

						// 3s后得到中奖索引
						// let index = Math.random() * 6 >> 0
						// 缓慢停止游戏
						this.$refs.luckyWheel.stop(index)
					}, 3000)
				} else {
					uni.showToast({
						title: '请登录再抽奖',
						icon: 'none',
						duration: 1500
					});
					setTimeout(function() {
						uni.navigateTo({
							url: '../login/login'
						})
					}, 1500)
				}

			},
			// 抽奖结束触发回调
			endCallBack(prize) {


				// 奖品详情
				this.keyword = prize.keyword
				var token = common.cache('token', null)
				let params = {
					token: token,
					keyword: prize.keyword
				}

				$prize.lucky(params, 'POST').then(res => {
					this.modal = true
					if (res.code == 0) {
						this.keyword = null
						this.res_title = res.msg
					}
				});

			},
			//　关闭
			closeModal() {
				this.modal = false
				// this.ss = 0
				// this.deg = 0
				// setTimeout(() => {
				// 	this.ss = s
				// }, 100)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100%;
	}

	.bg-set {
		position: fixed;
		height: 100%;
		width: 100%;
		top: 35px;
		left: 0;
		z-index: -1;
	}

	.header {
		/* position: fixed;
		height: 35px;
		width: 100%;
		top: 50px;
		left: 0; */
		/* width: 100%; */
		height: 35px;
		margin: 0 5%;
	}

	.title {
		margin: 40px 5% 0 5%;
		width: 90%;
		height: 150px;
	}

	.lucky {
		margin: 35px auto 0 auto;

	}

	// .modal{
	// 	position: fixed;
	// 	top: 0;
	// 	right: 0;
	// 	bottom: 0;
	// 	left: 0;
	// 	background-color: rgba(0,0,0, .4);
	// 	z-index: 100;
	// 	display: none;
	// }
	.modal.show {
		display: block;
	}

	.modal {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .4);
		z-index: 100;
		display: none;

		.modal-body {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
			width: 640upx;
			height: 800upx;

			.modal-image {
				height: 380px;
			}

			.image-1 {
				position: absolute;
				top: 110px;
				right: 0;
				bottom: 0;
				left: 0;
			}

			.image-2 {
				position: absolute;
				top: 110px;
				right: 0;
				bottom: 0;
				left: 0;
			}

			.image-3 {
				position: absolute;
				top: 110px;
				right: 0;
				bottom: 0;
				left: 0;
			}

			.model-text {
				position: absolute;
				top: 240px;
				right: 0;
				bottom: 0;
				left: 105px;
				font-size: 28px;
				color: #ffffff;
			}
		}
	}
</style>
